<template>
  <div class="study-page">
    <tab :line-width="0" class="tab" active-color="#353535">
      <tab-item :selected="currentTab === 1" @click.native="toggle(1)">
        已报名
      </tab-item>
      <tab-item :selected="currentTab === 2" @click.native="toggle(2)">
        已确认
      </tab-item>
      <tab-item :selected="currentTab === 3" @click.native="toggle(3)">
        已签到
      </tab-item>
    </tab>
    <CourseItem v-for="course in courseList" :course="course">
    </CourseItem>
    <p class="empty-sug" v-if="courseList.length === 0">该选项下没有数据</p>
  </div>
</template>

<script>
import {
  Tab,
  TabItem
} from 'vux'

import CourseItem from 'components/CourseItem'
// const version = require('../package.json').version
export default {
  components: {
    Tab,
    TabItem,
    CourseItem
  },
  data () {
    return {
      currentTab: 1,
      menu: {
        1: '已报名',
        2: '已确认',
        3: '已签到'
      },
      list: {

      },
      courseList: []
    }
  },
  created () {
    var tab = parseInt(this.$route.params.tab)
    if (isNaN(tab) || tab < 0) {
      tab = 1
    }
    this.currentTab = tab
    this.getCourse(this.currentTab)
  },
  methods: {
    toggle (tab) {
      console.log(tab)
      this.currentTab = tab
      this.getCourse(tab)
    },
    getCourse (tab) {
      if (this.list[tab]) {
        this.courseList = this.list[tab]
        return
      }
      this.$api.course.userCourse(tab).then((data) => {
        console.log(data)
        var list = data.list
        for (var i = 0; i < list.length; i++) {
          var course = list[i]
          if (tab === 3) {
            course.link = '/parent/course/course_material/' + course.id
          } else {
            course.link = '/parent/course/detail/' + course.id
          }

          course = this.$course.formatCourse(course)
        }
        console.log(list)
        this.list[tab] = list
        this.courseList = this.list[tab]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.cl-module{
  margin-top: -5px;
  :nth-child(even){
    margin-left: 5px;
  }
}
div.vux-tab .vux-tab-selected{
  background: #eaeaea;
}
.empty-sug{
  text-align: center;
  line-height: 40px;
  color: #666;
}
</style>
